<template>
  <div class="container">
    <div style="background-color: #2758bb">
      <nav-bar subTitle="土地要素">
      </nav-bar>
    </div>
    <div class="body">
      <el-card shadow="never">
        <el-row :gutter="20">
          <template v-for="(item,index) in regionalElements">
            <el-col :span="8">
              <div class="la-box" :class="current===index?'la-show':''"
                   :style="{backgroundColor:item.bgColor,backgroundImage:`url(${item.logo})`}"
                   @click="setCurrent(index)"
              >
                <div>
                  <strong>{{ item.title }}</strong>
                </div>
                <div>
                  <strong :style="{color:item.color,fontSize:'30px'}"> {{ item.count }}</strong>
                  <small>{{ item.unit }}</small>
                </div>
                <div>
                  <strong>{{ item.area }}</strong> <small>平方米</small>
                </div>
              </div>
            </el-col>
          </template>
        </el-row>
        <br>
        <div class="ov-title">
          <strong>土地申报</strong>
        </div>
        <div class="la-sb">
          申报土地总数 <strong>{{landApplyArea.landApplyCount}}</strong> 宗 <strong>{{landApplyArea.landApplyArea}}</strong> 平方米
        </div>
        <br>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="la-echarts">
              <div class="ov-title">
                <strong>使用情况</strong>
              </div>
              <UsageSituationEchsrts :tableData="landPieChartList"></UsageSituationEchsrts>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="la-echarts">
              <div class="ov-title">
                <strong>权证关联情况</strong>
              </div>
              <warrant-association-echarts :tableData="warrant"></warrant-association-echarts>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="la-echarts">
              <div class="ov-title">
                <strong>企业关联情况</strong>
              </div>
              <enterprise-affiliation-echarts :tableData="enterprise"></enterprise-affiliation-echarts>
            </div>

          </el-col>
        </el-row>
        <br>
        <div class="ov-title">
          <strong>关联企业分布情况</strong>
        </div>
        <el-table :data="tableData" height="350" :header-cell-style="{ background: '#f5f7fa', color: '#999999' }">>
          <el-table-column type="index" label="排名" width="60"/>
          <el-table-column prop="deptIdName" label="区域" width="180"/>
          <el-table-column prop="landCount" label="土地数量(宗)"/>
          <el-table-column prop="actualArea" label="土地面积(平方米)"/>
          <el-table-column prop="estateCount" label="关联权证"/>
          <el-table-column prop="companyCount" label="关联企业"/>
          <el-table-column prop="rate" label="占比"/>
        </el-table>
        <br>
        <div class="ov-title">
          <strong>五大产业平台（生命科学城、中交未来城、智能制造城、茗山科技城、滨海低碳城）</strong>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="la-qin" style="background-color: #f5f8ff">
              <div class="la-qin-title">土地总数 <strong>{{ cityLandList.landCount }}</strong> <small> 宗 </small>
                <strong>{{ cityLandList.landArea }}</strong><small>平方米</small></div>
              <br>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="qin-box">
                    <strong>可用土地</strong>
                    <br>
                    <div>
                      <el-image style="width: 45px;height: 40px" :src="imagesData[0]"></el-image>
                      <div>
                        <strong> {{ cityLandList.usableCount }} </strong> <small>宗</small>
                        <br>
                        <strong style="color:#ffa33c;">{{ cityLandList.usableArea }}</strong><small>平方米</small>
                      </div>
                    </div>

                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="qin-box">
                    <strong>已用土地</strong>
                    <br>
                    <div>
                      <el-image style="width: 45px;height: 40px" :src="imagesData[1]"></el-image>
                      <div>
                        <strong> {{ cityLandList.usedCount }} </strong> <small>宗</small>
                        <br>
                        <strong style="color:#ffa33c;">{{ cityLandList.usedArea }}</strong><small>平方米</small>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="qin-box">
                    <strong>待规划</strong>
                    <br>
                    <div>
                      <el-image style="width: 45px;height: 40px" :src="imagesData[2]"></el-image>
                      <div>
                        <strong> {{ cityLandList.forPlanCount }} </strong> <small>宗</small>
                        <br>
                        <strong style="color:#ffa33c;">{{ cityLandList.forPlanArea }}</strong><small>平方米</small>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="ov-title">
              <strong>使用情况</strong>
            </div>
            <UsageSituationEcharts2 :tableData="cityList"></UsageSituationEcharts2>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>


<script setup>
import NavBar from "@/components/navBar.vue";
import {
  cityData,
  distributeData,
  fiveCityLandData,
  imagesData,
  landApplyAreaData,
  landPieChartData,
  regionalElements
} from './data/data.js'
import {reactive, ref} from "vue";
import WarrantAssociationEcharts from "@/views/landElements/Echarts/WarrantAssociationEcharts.vue";
import EnterpriseAffiliationEcharts from "@/views/landElements/Echarts/EnterpriseAffiliationEcharts.vue";
import UsageSituationEchsrts from "@/views/landElements/Echarts/UsageSituationEchsrts.vue";
import UsageSituationEcharts2 from "@/views/landElements/Echarts/UsageSituationEcharts2.vue";

const current = ref(0)

const landPieChartList = ref(landPieChartData[current.value])
const warrantList = reactive([
  74.09,
  74.17,
  58.82
])
const warrant = ref(warrantList[current.value])

const enterpriseList = reactive([
  77.44,
  77.48,
  70.59
])
const enterprise = ref(enterpriseList[current.value])

const tableData = reactive(distributeData[current.value])

const cityLandList = reactive(fiveCityLandData[current.value])

const cityList = ref(cityData[current.value])

const landApplyArea = ref(landApplyAreaData[current.value])

const setCurrent = (index) => {
  current.value = index
  landPieChartList.value = landPieChartData[index]
  warrant.value = warrantList[index]
  enterprise.value = enterpriseList[index]
  tableData.value = distributeData[index]
  cityLandList.value = fiveCityLandData[index]
  cityList.value = cityData[index]
  landApplyArea.value = landApplyAreaData[index]
}

</script>

<style scoped lang="scss">
.container {
  background-color: #ecf1f7;
}

.body {
  box-sizing: border-box;
  padding: 15px;
  background-color: #ecf1f7;
}

.la-box {
  height: 140px;
  border: 1px solid #efefef;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-left: 120px;
  padding-top: 10px;
  box-sizing: border-box;
  cursor: pointer;

  > div {
    margin: 8px 0;
  }

}

.la-show {
  height: 140px;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: calc(50% - 10px);
    bottom: -10px;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    background-color: inherit;
  }
}

.ov-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;

  > strong {
    font-size: 16px;
    border-left: 4px solid #2368fa;
    padding-left: 10px;
  }
}

.la-sb {
  padding: 15px;
  background-color: #f7f9fc;
  border-radius: 4px;
  font-size: 18px;
  color: #666;
  text-align: center;

  > strong {
    font-weight: bold;
    color: #ffa33c;
  }
}

.la-echarts {
  height: 240px;
}

.la-qin {
  padding: 20px;

  .la-qin-title {
    font-size: 16px;
    line-height: 60px;
    text-align: center;
    background: linear-gradient(90deg, rgba(240, 246, 255, 0) 0%, #d8e4ff 18%, #d9e4ff 82%, rgba(233, 243, 255, 0) 100%);

    > strong {
      font-size: 20px;
      color: #ffa33c;
    }

    > small {
      color: #999999;
    }
  }

  .qin-box {
    padding: 20px;
    box-sizing: border-box;
    background-color: #ffffff;

    > div {
      margin-top: 20px;
      display: flex;

      > div:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
